<template>
  <el-main>
    <el-card style="padding:0;">
      <div slot="header" class="clearfix" style="font-weight:600;">
        <el-row style="text-align: right;">
          <el-col :span="12" style="text-align: left;">
            <span>预约情况</span>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-date-picker v-model="fieldDate" type="date" size="mini" style="width: 140px;margin-right:10px;"
              placeholder="选择日期" value-format="yyyy-MM-dd" :clearable="false" @change="choiceDate">
            </el-date-picker>
            <el-select @change="choiceId" style="width: 130px;" v-model="fieldId" placeholder="请选择" size="mini">
              <el-option v-for="item in fieldList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div ref="chatRef" :class="className" :style="{ height: height, width: width }" />
    </el-card>
  </el-main>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getValidFieldListApi } from "@/api/field";
import { getFieldBookChartApi } from "@/api/chart-data";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      fieldList: [],
      date: [],
      chartData: {},
      fieldId: '',
      fieldDate: '',
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    },
  },
  created() {
    this.fieldDate = new Date();
    this.getDate();
    this.getValidParentFieldList();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    //选择日期
    choiceDate() {
      this.getDate();
      this.getFieldBookChart();
      this.$nextTick(() => {
        this.initChart()
      })
    },
    //选择场馆
    choiceId() {
      this.getFieldBookChart();
      this.$nextTick(() => {
        this.initChart()
      })
    },

    //获取场馆下拉选项
    async getValidParentFieldList() {
      let res = await getValidFieldListApi({ pid: 0 });
      if (res && res.code == 200) {
        this.fieldList = [];
        let copylist = res.data;
        copylist.forEach(item => {
          const { id, name } = item;
          this.fieldList.push({ id, name });
        });
        this.fieldId = this.fieldList[0].id;
        this.$nextTick(() => {
          this.getFieldBookChart();
        })
      }
    },

    // 获取最近七天日期
    getDate() {
      let days = [];
      for (let i = 0; i <= 144; i += 24) {		//144是前六天的小时数
        let dateItem = new Date(this.fieldDate.getTime() - i * 60 * 60 * 1000);	//使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let m = (dateItem.getMonth() + 1).toString();	//获取月份并补零，月份从0开始，需要+1
        let d = dateItem.getDate().toString();	//获取日期并补零
        days.unshift(m + '-' + d);
      }
      this.date = days;
    },

    async getFieldBookChart() {
      let parm = {
        id: this.fieldId,
        date: this.fieldDate
      }
      let res = await getFieldBookChartApi(parm);
      if (res && res.code == 200) {
        const { actualData, expectedData } = res.data;
        this.chartData = { actualData, expectedData };
      }
    },

    initChart() {
      this.chart = echarts.init(this.$refs.chatRef, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: this.date,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['预约人数', '到场人数']
        },
        series: [{
          name: '预约人数', itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 1500,
          animationEasing: 'cubicInOut'
        },
        {
          name: '到场人数',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#67C23A',
              lineStyle: {
                color: '#67C23A',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: actualData,
          animationDuration: 1500,
          animationEasing: 'quadraticOut'
        }]
      })
    }
  }
}
</script>
